<template>
    <div class="loginForm">
        <el-tabs v-model="activeName">
            <el-tab-pane label="用户登录" name="first">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="用户名">
                        <el-input v-model="form.suName" placeholder="用户名/手机号"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input type="password" v-model="form.suPassword" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="this.login">登录</el-button>
                        <el-button type="" @click="this.regist">免费注册</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="邮箱登录" name="second">
                <el-form :model="mailForm" label-width="80px">
                    <el-form-item label="邮箱">
                        <el-input v-model="mailForm.mail" placeholder="网易/QQ邮箱"></el-input>
                    </el-form-item>
                    <el-form-item label="验证码">
                        <el-input type="password" v-model="mailForm.captcha" placeholder="请输入验证码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="this.sendCaptcha" :disabled="btnEnable">{{ btnText }}</el-button>
                        <el-button type="primary" @click="this.mailLogin">登录</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>

        <!-- 注册 -->
        <el-dialog width="400px" title="注册" :visible.sync="dialogFormVisible">
            <!-- :model控制表单中的数据 -->
            <el-form :model="registForm" class="registsty">
                <el-form-item label="用户名">
                    <el-input v-model="form.suName" placeholder="用户名/手机号"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input type="password" v-model="form.suPassword" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button t ype="primary" @click="dialogFormVisible = false">返回登录</el-button>
                    <el-button type="" @click="regist">注册</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

    </div>
</template>
<style>
.loginForm {
    width: 400px;
    border: 3px solid #294660;
    padding: 30px;
    position: absolute;
    left: 100px;
    bottom: 100px;
    border-radius: 10px;
    backdrop-filter: blue(3px);
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.5px);
}

.loginForm .el-form-item__label {
    color: #fff;
}

.loginForm .el-tabs__item {
    color: #fff;
}

.loginForm .el-tabs__item.is-active {
    color: #66b1ff;
}

body {
    background-image: url(../assets/back.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}
</style>>
<script>
import axios from 'axios';
import qs from 'qs';
export default {
    data() {
        return {
            form: {
                suName: '',
                suPassword: ''
            },
            activeName: "first",
            mailForm: {
                mail: ''
            },
            btnText: '发送验证码',
            btnEnable: false,
            registForm: {},
            dialogFormVisible: false


        }
    },
    methods: {
        //用户名登录
        login() {
            if (this.form.suName == '' || this.form.suPassword == '') {
                this.$message({
                    type: "error",
                    message: "用户名或密码不能为空"
                })
                return false;
            }
            axios.post("http://192.168.124.96:9090/login", qs.stringify(this.form)).then(res => {
                console.log(res);
                if (res.data.code == 0) {
                    // 将后端返回的token保存到localStorage中
                    window.localStorage.setItem("token", res.data.obj)
                    // 跳转到首页
                    // location.href="http://localhost:8080/#/index";
                    this.$router.replace("/index");
                } else {
                    this.$message({
                        type: "error",
                        message: res.data.msg
                    })
                }
            })

        },
        //邮箱验证
        sendCaptcha() {
            //先查询邮箱是否正确或存在
            var mailReg = /^\w{5,11}@(163|qq).com$/i;
            // 邮箱格式正确，请求得到验证码
            if (mailReg.test(this.mailForm.mail)) {
                this.time = 60;
                this.btnEnable = true;
                var mi = setInterval(() => {
                    --this.time;
                    this.btnText = "已发送," + this.time + "秒后重试";
                    if (this.time == 0) {
                        clearInterval(mi);
                        this.btnEnable = false;
                        this.btnText = "发送验证码";
                    }
                }, 1000);


                axios.post("http://192.168.124.96:9090/getCaptcha?mail=" + this.mailForm.mail).then(res => {
                    this.$message({
                        type: res.data.code == 0 ? "success" : "error",
                        message: res.data.msg
                    });
                })
            } else {
                this.$message({
                    type: "warning",
                    message: "邮箱格式有误！"
                });
            }
        },
        //邮箱登录
        mailLogin() {
            axios.post("http://192.168.124.96:9090/mailLogin", qs.stringify(this.mailForm)).then(res => {
                if (res.data.code == 0) {
                    //将后端返回的token保存到localStorage中
                    window.localStorage.setItem("token", res.data.obj)
                    this.$router.replace("/index")
                } else {
                    this.$message({
                        type: "error",
                        message: res.data.msg
                    });
                }
            })
        },
        regist() {
            //显示对话框
            this.dialogFormVisible = true;
        }

    }
}

</script>
